<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>首页</title>
        <link rel="stylesheet" href="css/index.css">
        <link rel="stylesheet" href="icon/iconfont.css">
        <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    </head>
    <body>
        <header>
            <div class="logo-box">
                <div class="logo">
                    <h1>C<b>a</b>lm</h1>
                    <span>Free Creative Simple Portfolio</span>
                </div>
                <nav>
                    <ul>
                        <li class="nav-active">HOME</li>
                        <li>ABOUT</li>
                        <li>PORTFOLIO</li>
                        <li>SUPPORT</li>
                        <li>CONTACT</li>
                    </ul>
                </nav>
            </div>
            <div class="title-box">
                <div class="box-left">
                    <h3>Welcome Ladies & Gents to Calm Website.</h3>
                    <span>A theme more stylish than any other on ThemeForest.</span>
                </div>
                <div class="box-right">
                    <h3>FIND US ONLINE</h3>
                    <ul class="contact">
                        <li class="qq">
                            <a href="">
                                <i class="iconfont icon-qq"></i>
                            </a>
                        </li>
                        <li class="wechat">
                            <a href="">
                                <i class="iconfont icon-wechat"></i>
                            </a>
                        </li>
                        <li class="weibo">
                            <a href="">
                                <i class="iconfont icon-weibo"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </header>
        <div class="content">
            <div class="img-box">
                <div class="text-list">
                    <ul>
                        <li><a>All</a></li>
                        <li><a>Design</a></li>
                        <li><a>Branding</a></li>
                        <li><a>Graphic</a></li>
                        <li><a>Animation</a></li>
                        <li><a>Illustration</a></li>
                        <li><a>Photography</a></li>
                    </ul>
                </div>
                <div class="img-list">
                    <ul>
                        <li>
                            <a href="">
                                <img src="img/Layer-71.png" alt="Layer-71" />
                                <span class="text-one">Working in Shop</span>
                                <br>
                                <span class="text-two">Branding / Design </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/Layer-72.png" alt="Layer-72" />
                                <span class="text-one">Working in Shop</span>
                                <br>
                                <span class="text-two">Branding / Design </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/Layer-73.png" alt="Layer-73" />
                                <span class="text-one">Working in Shop</span>
                                <br>
                                <span class="text-two">Branding / Design </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/Layer-74.png" alt="Layer-74" />
                                <span class="text-one">Working in Shop</span>
                                <br>
                                <span class="text-two">Branding / Design </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/Layer-75.png" alt="Layer-75" />
                                <span class="text-one">Working in Shop</span>
                                <br>
                                <span class="text-two">Branding / Design </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/Layer-76.png" alt="Layer-76" />
                                <span class="text-one">Working in Shop</span>
                                <br>
                                <span class="text-two">Branding / Design </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/Layer-77.png" alt="Layer-77" />
                                <span class="text-one">Working in Shop</span>
                                <br>
                                <span class="text-two">Branding / Design </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/Layer-78.png" alt="Layer-78" />
                                <span class="text-one">Working in Shop</span>
                                <br>
                                <span class="text-two">Branding / Design </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/Layer-79.png" alt="Layer-79" />
                                <span class="text-one">Working in Shop</span>
                                <br>
                                <span class="text-two">Branding / Design </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/Layer-80.png" alt="Layer-80" />
                                <span class="text-one">Working in Shop</span>
                                <br>
                                <span class="text-two">Branding / Design </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/Layer-81.png" alt="Layer-81" />
                                <span class="text-one">Working in Shop</span>
                                <br>
                                <span class="text-two">Branding / Design </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/Layer-82.png" alt="Layer-82" />
                                <span class="text-one">Working in Shop</span>
                                <br>
                                <span class="text-two">Branding / Design </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="news">
            <div class="new-box">
                <div class="new-list">
                    <h3>About us</h3>
                    <div>
                        <p>Duis id eros ac eros cursus gravida a non magna. </p>
                        <p>Sed vitae nisl diam, non sollicitudin mi. In dui arcu, </p>
                        <p>rhoncus ac consequat eget, cursus sit amet risus.</p>

                        <p>Address: Street 9890, New Something 1234, </p>
                        <p>Country</p>
                        <p>Telephone: 1234 5678</p>
                        <p>Fax: 9876 5432</p>
                    </div>
                    <ul class="contact">
                        <li class="qq">
                            <a href="">
                                <i class="iconfont icon-qq"></i>
                            </a>
                        </li>
                        <li class="wechat">
                            <a href="">
                                <i class="iconfont icon-wechat"></i>
                            </a>
                        </li>
                        <li class="weibo">
                            <a href="">
                                <i class="iconfont icon-weibo"></i>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="new-list">
                    <h3>Latest Posts</h3>
                </div>
                <div class="new-list">
                    <h3>LATEST COMMENTS</h3>
                </div>
                <div class="new-list">
                    <h3>FLICKR PHOTOSTREAM</h3>
                </div>
            </div>
        </div>

        <footer>

        </footer>
    </body>
</html>
